import React, { Component } from 'react'
import Taro from '@tarojs/taro'
import { Canvas } from '@tarojs/components'
import F2 from '@antv/f2';
import { my as F2Context } from '@antv/f2-context';
import './index.scss'

function wrapEvent(e) {
  if (!e) return;
  if (!e.preventDefault) {
    e.preventDefault = function() {};
  }
  return e;
}

interface IProps {
  id: string;
  onInit: (f2: any, config: any, ref: any) => any
  data: any
  // width height 会作为元素兜底的宽高使用
  width?: number;
  height?: number;
}

interface IState {
  width?: number;
  height?: number;
}

const sysInfo = Taro.getSystemInfoSync()
const screenWidth = sysInfo.screenWidth
const pixelRatio = sysInfo.pixelRatio;
export default class F2Chart extends Component<IProps, IState> {

  static defaultProps = {
    id: '0',
    width: 0.75 * screenWidth / pixelRatio,
    height: 140
  }

  chart: any;
  canvasEl: any;
  $scope: Record<string, any> | undefined;

  constructor(props) {
    super(props);
    this.state = {
      width: 300,
      height: 300
    }
  }

  componentWillMount() { }

  componentDidMount() {
    // this.onDraw()
  }

  componentDidUpdate (prevProps, prevState) {
    if (!this.chart && prevProps.data !== this.props.data) {
      this.onDraw()
    }

  }

  onDraw() {
    const id = `f2-canvas-${this.props.id}`;
      // const myCtx = my.createCanvasContext(id);
      const cvsCtx = Taro.createCanvasContext(id, this.$scope);
      const context = F2Context(cvsCtx);

      const query = Taro.createSelectorQuery();
      query
        .select(`#${id}`)
        .boundingClientRect()
        .exec(res => {
          // 获取画布实际宽高, 用props的宽高做失败兜底
          const { width, height } = res && res[0] ? res[0] : this.props;
          if (!width || !height) {
            return;
          }

          // 高清解决方案
          this.setState({
            // id,
            width: width * pixelRatio,
            height: height * pixelRatio
            // width,
            // height
          }, () => {
            // const ref = this;
              console.log('this.props.onInit called')
            const chart = this.props.onInit(F2, {
              context,
              width: this.state.width,
              height: this.state.height,
              pixelRatio
            }, this.props.data);
            if (chart) {
              this.chart = chart;
              this.canvasEl = chart.get('el');
            }
          });

        });
  }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  onTouchStart(e) {
    const canvasEl = this.canvasEl;
      if (!canvasEl) {
        return;
      }
      canvasEl.dispatchEvent('touchstart', wrapEvent(e));
  }

  onTouchMove(e) {
    const canvasEl = this.canvasEl;
      if (!canvasEl) {
        return;
      }
      canvasEl.dispatchEvent('touchmove', wrapEvent(e));
  }

  onTouchEnd(e) {
    const canvasEl = this.canvasEl;
      if (!canvasEl) {
        return;
      }
      canvasEl.dispatchEvent('touchend', wrapEvent(e));
  }

  render () {
    const id = `f2-canvas-${this.props.id}`;
    return (
        <Canvas
          id={id}
          canvasId={id}
          className='f2-canvas'
          width={this.state.width}
          height={this.state.height}
          onTouchStart={this.onTouchStart}
          onTouchMove={this.onTouchMove}
          onTouchEnd={this.onTouchEnd}
        />
    )
  }
}
